<%@ page language="java" isThreadSafe="true" pageEncoding="utf8" %>
<html>
  <head>
    <title>用户注册</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	  <script src="../../ststic/js/vue.js"></script>
	  <!-- 引入样式 -->
	  <link rel="stylesheet" href="../../ststic/js/element-ui/lib/theme-chalk/index.css">
	  <!-- 引入组件库 -->
	  <script src="../../ststic/js/element-ui/lib/index.js"></script>
  </head>
  <body>
	  <div id="app">
		  <h1 align="center">注册</h1>
		  <div class="myapp">
			<el-form id="form" ref="form" :rules="rules" :model="form" label-width="80px" action="/newStu">
				<el-form-item label="姓名" prop="name" >
					<el-input v-model="form.name" show-word-limit maxlength="5" name="sname"
							  clearable style="width: 300px">
					</el-input>
				</el-form-item>
				<el-form-item label="密码" prop="pass">
					<el-input style="width: 300px" type="password" v-model="form.pass" autocomplete="off"
							  name="password"></el-input>
				</el-form-item>
				<el-form-item label="确认密码" prop="checkPass">
					<el-input style="width: 300px" type="password" v-model="form.checkPass" autocomplete="off">
					</el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm">确定</el-button>
					<el-button onclick=window.location.href='login.html'>取消</el-button>
				</el-form-item>
			</el-form>
			</form>
		  </div>
	  </div>
	</body>
</html>
<script>
	new Vue({
		el:"#app",
		data(){
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				} else {
					if (this.form.checkPass !== '') {
						this.$refs.form.validateField('checkPass');
					}
					callback();
				}
			};
			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.form.pass) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			return{
				form: {
					name: '',
					pass: '',
					checkPass: ''
				},
				rules:{
					name: [
						{ required: true, message: '请输入姓名', trigger: 'blur' }
					],
					pass: [
						{ validator: validatePass, trigger: 'blur' }
					],
					checkPass: [
						{ validator: validatePass2, trigger: 'blur' }
					]
				}
			}
		},
		methods:{
			submitForm() {
				this.$refs.form.validate((valid) => {
					if (valid) {
						document.getElementById("form").submit();
					}
				});
			}
		}
	})
</script>
<style>
	.myapp{
		display: flex;
		justify-content: center;
		align-items: center;

	}
</style>